<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        input {
            BORDER-TOP-STYLE: none;
            BORDER-RIGHT-STYLE: none;
            BORDER-LEFT-STYLE: none;
            /*BORDER-BOTTOM-STYLE: solid*/
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">学校安全基本情况统计表</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="姓名">
                            <el-input v-model="name" autocomplete="off" class="itemW"
                                      placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="addBtn">添加</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="tableData" height="660" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="gender" label="性别">
                        <template slot-scope="scope">
                            <template v-if="scope.row.gender==0">
                                男
                            </template>
                            <template v-if="scope.row.gender==1">
                                女
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="age" label="年龄"></el-table-column>
                    <el-table-column prop="schoolSection" label="学段">
                        <template slot-scope="scope" v-if="scope.row.schoolSection">
                            <template v-if="scope.row.schoolSection==1">
                                幼儿园
                            </template>
                            <template v-if="scope.row.schoolSection==2">
                                小学
                            </template>
                            <template v-if="scope.row.schoolSection==3">
                                初中
                            </template>
                            <template v-if="scope.row.schoolSection==4">
                                高中
                            </template>
                            <template v-if="scope.row.schoolSection==5">
                                完全中学
                            </template>
                            <template v-if="scope.row.schoolSection==6">
                                九年一贯制学校
                            </template>
                            <template v-if="scope.row.schoolSection==7">
                                九年一贯制、高中
                            </template>
                            <template v-if="scope.row.schoolSection==8">
                                职业学校
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deathType" label="死亡类型">
                        <template slot-scope="scope" v-if="scope.row.deathType">
                            <template v-if="scope.row.deathType==1">
                                溺水
                            </template>
                            <template v-if="scope.row.deathType==2">
                                火灾
                            </template>
                            <template v-if="scope.row.deathType==3">
                                猝死
                            </template>
                            <template v-if="scope.row.deathType==4">
                                交通事故
                            </template>
                            <template v-if="scope.row.deathType==5">
                                医疗事故
                            </template>
                            <template v-if="scope.row.deathType==6">
                                他杀
                            </template>
                            <template v-if="scope.row.deathType==7">
                                其他
                            </template>
                        </template>
                    </el-table-column>
                    <!--<el-table-column prop="deathTime" label="死亡时间" width="110px">-->
                    <!--<template slot-scope="scope" v-if="scope.row.deathTime">-->
                    <!--<el-tag size="medium">{{scope.row.deathTime.replace("T"," ").substr(0,10)}}-->
                    <!--</el-tag>-->
                    <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="city" label="城市" width="110px"></el-table-column>-->
                    <!--<el-table-column prop="isLocalAccount" label="是否本地户籍">-->
                    <!--<template slot-scope="scope" v-if="scope.row.isLocalAccount">-->
                    <!--<template v-if="scope.row.isLocalAccount==0">-->
                    <!--否-->
                    <!--</template>-->
                    <!--<template v-if="scope.row.isLocalAccount==1">-->
                    <!--是-->
                    <!--</template>-->
                    <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="deathAddress" label="死亡地点"></el-table-column>-->
                    <!--<el-table-column prop="homeTown" label="籍贯"></el-table-column>-->
                    <!--<el-table-column prop="county" label="县"></el-table-column>-->
                    <!--<el-table-column prop="isCountrysideSchool" label="是否农村学校">-->
                    <!--<template slot-scope="scope">-->
                    <!--<template v-if="scope.row.isCountrysideSchool==0">-->
                    <!--否-->
                    <!--</template>-->
                    <!--<template v-if="scope.row.isCountrysideSchool==1">-->
                    <!--是-->
                    <!--</template>-->
                    <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="grade" label="年级">-->
                    <!--<template slot-scope="scope" v-if="scope.row.grade">-->
                    <!--<template v-if="scope.row.grade==1">-->
                    <!--一年级-->
                    <!--</template>-->
                    <!--<template v-if="scope.row.grade==2">-->
                    <!--二年级-->
                    <!--</template>-->
                    <!--<template v-if="scope.row.grade==3">-->
                    <!--三年级-->
                    <!--</template>-->
                    <!--<template v-if="scope.row.grade==4">-->
                    <!--四年级-->
                    <!--</template>-->
                    <!--<template v-if="scope.row.grade==5">-->
                    <!--五年级-->
                    <!--</template>-->
                    <!--<template v-if="scope.row.grade==6">-->
                    <!--六年级-->
                    <!--</template>-->
                    <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="deathMonth" label="死亡月份"></el-table-column>-->
                    <el-table-column prop="isSchool" label="是否在校">
                        <template slot-scope="scope">
                            <template v-if="scope.row.isSchool==0">
                                否
                            </template>
                            <template v-if="scope.row.isSchool==1">
                                是
                            </template>
                        </template>
                    </el-table-column>
                    <!--<el-table-column prop="externalHappening" label="外置情况"></el-table-column>-->
                    <!--<el-table-column prop="note" label="备注"></el-table-column>-->


                    <!--<el-table-column prop="comAontent" label="上级批示"></el-table-column>-->
                    <el-table-column prop="stationName" label="操作">
                        <template slot-scope="scope">
                            <el-button round icon="el-icon-setting" size="mini"
                                       @click="editClick(scope.row)" type="info">编辑
                            </el-button>
                            <el-button @click="removeItem(scope.row.id)" round size="mini" icon="el-icon-delete"
                                       type="danger">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑':'添加'" :visible.sync="addVisible" :show-close="false" style="width: 1500px">
            <el-form label-width="120px" :inline="true" :model="form" ref="form">
                <el-form-item label="姓名" prop="name" :rules="[
                             {required:true,message:'姓名不能为空!',trigger:'blur'}]">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender" :rules="[
                             {required:true,message:'性别',trigger:'blur'}]">
                    <el-select style="width: 200px;" v-model="form.gender" @change="select_status">
                        <!--<el-option label="请选择" value=""></el-option>-->
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄" prop="age" :rules="[
                             {required:true,message:'年龄!',trigger:'blur'}]">
                    <el-input v-model="form.age" type="number"></el-input>
                </el-form-item>
                <el-form-item label="籍贯" prop="homeTown" :rules="[
                             {required:true,message:'籍贯',trigger:'blur'}]">
                    <el-input v-model="form.homeTown"></el-input>
                </el-form-item>
                <el-form-item label="城市" prop="city" :rules="[
                             {required:true,message:'城市!',trigger:'blur'}]">
                    <el-input v-model="form.city"></el-input>
                </el-form-item>

                <el-form-item label="县" prop="county" :rules="[
                             {required:true,message:'县!',trigger:'blur'}]">
                    <el-input v-model="form.county"></el-input>
                </el-form-item>
                <el-form-item label="是否本地户籍" prop="isLocalAccount" :rules="[
                             {required:true,message:'是否本地户籍!',trigger:'blur'}]">
                    <el-select style="width: 200px;" v-model="form.isLocalAccount" @change="select_status">
                        <!--<el-option label="请选择" value=""></el-option>-->
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否农村学校" prop="isCountrysideSchool" :rules="[
                             {required:true,message:'是否农村学校',trigger:'blur'}]">
                    <el-select style="width: 200px;" v-model="form.isCountrysideSchool" @change="select_status">
                        <!--<el-option label="请选择" value=""></el-option>-->
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学段" prop="schoolSection" :rules="[
                             {required:true,message:'学段!',trigger:'blur'}]">
                    <el-select style="width: 200px;" v-model="form.schoolSection" @change="select_status">
                        <!--<el-option label="请选择" value=""></el-option>-->
                        <el-option label="幼儿园" value="1"></el-option>
                        <el-option label="小学" value="2"></el-option>
                        <el-option label="初中" value="3"></el-option>
                        <el-option label="高中" value="4"></el-option>
                        <el-option label="完全中学" value="5"></el-option>
                        <el-option label="九年一贯制学校" value="6"></el-option>
                        <el-option label="九年一贯制、高中" value="7"></el-option>
                        <el-option label="职业学校" value="8"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年级" prop="grade" :rules="[
                             {required:true,message:'年级!',trigger:'blur'}]">
                    <el-select style="width: 200px;" v-model="form.grade" @change="select_status">
                        <!--<el-option label="请选择" value=""></el-option>-->
                        <el-option label="一年级" value="1"></el-option>
                        <el-option label="二年级" value="2"></el-option>
                        <el-option label="三年级" value="3"></el-option>
                        <el-option label="四年级" value="4"></el-option>
                        <el-option label="五年级" value="5"></el-option>
                        <el-option label="六年级" value="6"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="死亡类型" prop="deathType" :rules="[
                             {required:true,message:'死亡类型!',trigger:'blur'}]">
                    <el-select style="width: 200px;" v-model="form.deathType" @change="select_status">
                        <!--<el-option label="请选择" value=""></el-option>-->
                        <el-option label="溺水" value="1"></el-option>
                        <el-option label="火灾" value="2"></el-option>
                        <el-option label="猝死" value="3"></el-option>
                        <el-option label="交通事故" value="4"></el-option>
                        <el-option label="医疗事故" value="5"></el-option>
                        <el-option label="他杀" value="6"></el-option>
                        <el-option label="其他" value="7"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="死亡时间" :label-width="120" prop="deathTime" :rules="[
                             {required:true,message:'死亡时间!',trigger:'blur'}
                            ]">
                    <el-date-picker
                            v-model="form.deathTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="死亡时间" style="width: 200px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="死亡地点" prop="deathAddress" :rules="[
                             {required:true,message:'死亡地点',trigger:'blur'}]">
                    <el-input v-model="form.deathAddress"></el-input>
                </el-form-item>


                <el-form-item label="死亡月份" prop="deathMonth" :rules="[
                             {required:true,message:'死亡月份!',trigger:'blur'}]">
                    <el-input v-model="form.deathMonth" type="number"></el-input>
                </el-form-item>

                <el-form-item label="是否在校" prop="isSchool" :rules="[
                             {required:true,message:'是否在校',trigger:'blur'}]">
                    <el-select style="width: 200px;" v-model="form.isSchool" @change="select_status">
                        <!--<el-option label="请选择" value=""></el-option>-->
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="外置情况" prop="externalHappening">
                    <el-input v-model="form.externalHappening"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="note">
                    <el-input v-model="form.note"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addVisible=false">取消</el-button>
                <el-button @click="plan_submit" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            headers: {
                uid: '',
                token: '',
            },
            commend: {},
            commendVisible: false,
            accidentGrade: '',
            startTime: '',
            endTime: '',
            editVisible: false,
            tableData: [],
            addVisible: false,
            addVisible1: false,
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
            addForm: {},
            editForm: {},
            param: {},
            editMod: false,
            form: {},
            name: ''

        },
        created: function () {
            this.headers = {
                uid: SiteConfig.account.uId,
                token: SiteConfig.account.accessToken
            }
            $('.page').show();
            this.loadData();
        },
        methods: {
            select_status() {
                this.$forceUpdate();
            },
            plan_submit() {


                if (!this.form.name) {
                    this.$message({type: 'error', message: '姓名不能为空'})
                    return;
                }
                if (!this.form.gender) {
                    this.$message({type: 'error', message: '性别不能为空'})
                    return;
                }
                if (!this.form.age) {
                    this.$message({type: 'error', message: '年龄不能为空'})
                    return;
                }
                if (!this.form.homeTown) {
                    this.$message({type: 'error', message: '籍贯不能为空'})
                    return;
                }

                if (!this.form.city) {
                    this.$message({type: 'error', message: '城市不能为空'})
                    return;
                }
                if (!this.form.county) {
                    this.$message({type: 'error', message: '县区不能为空'})
                    return;
                }

                if (!this.form.isLocalAccount) {
                    this.$message({type: 'error', message: '是否本地户籍不能为空'})
                    return;
                }
                if (!this.form.isCountrysideSchool) {
                    this.$message({type: 'error', message: '是否农村学校不能为空'})
                    return;
                }


                if (!this.form.schoolSection) {
                    this.$message({type: 'error', message: '学段不能为空'})
                    return;
                }
                if (!this.form.grade) {
                    this.$message({type: 'error', message: '年级不能为空'})
                    return;
                }

                if (!this.form.deathType) {
                    this.$message({type: 'error', message: '死亡类型不能为空'})
                    return;
                }
                if (!this.form.deathTime) {
                    this.$message({type: 'error', message: '死亡时间不能为空'})
                    return;
                }
                if (!this.form.deathAddress) {
                    this.$message({type: 'error', message: '死亡地点不能为空'})
                    return;
                }
                if (!this.form.deathMonth) {
                    this.$message({type: 'error', message: '死亡月份不能为空'})
                    return;
                }
                if (!this.form.isSchool) {
                    this.$message({type: 'error', message: '是否在校不能为空'})
                    return;
                }
                this.form.projectNo = SiteConfig.account.projectNo;
                if (!this.editMod) {
                    HttpUtil.get('SchoolCasualtiesInfo/Add', this.form).success((r) => {
                        if (r.state == 0) {
                            this.$message.success('添加成功');
                            this.addVisible = false;
                            this.loadData();
                        } else {
                            this.$message.warning('添加失败');
                        }
                    })
                } else {

                    HttpUtil.get('SchoolCasualtiesInfo/Update', this.form).success((r) => {
                        if (r.state == 0) {
                            this.$message.success('保存成功');
                            this.addVisible = false;
                            this.loadData();

                        } else {
                            this.$message.warning('修改失败');
                        }
                    })
                }
            },
            editClick(row) {
                this.form = Object.assign(this.form, row);
                this.form.isLocalAccount = row.isLocalAccount.toString();
                this.form.deathType = row.deathType.toString();
                this.form.gender = row.gender.toString();
                this.form.isCountrysideSchool = row.isCountrysideSchool.toString();
                this.form.isSchool = row.isSchool.toString();
                this.form.grade = row.grade.toString();
                this.addVisible = true;
                this.editMod = true;
            },
            removeItem: function (id) {
                if (!id) {
                    this.$message({
                        type: 'info',
                        message: 'id为空'
                    });
                    return;
                }
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('SchoolCasualtiesInfo/Delete', {Id: id}).success((r) => {
                        if (r.state == 0) {
                            vuePage.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            vuePage.loadData();
                        } else {
                            vuePage.$message.error('删除失败!');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            onChangePage(page) {
                this.pageno = page;
                this.loadData();
            },
            loadData: function () {
                var param = {};
                if (this.name)
                    param.name = this.name;
                if (SiteConfig.account.projectNo)
                    param.projectNo = SiteConfig.account.projectNo;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;

                HttpUtil.get('SchoolCasualtiesInfo/List', param).success((res) => {
                    vuePage.tableData = res.data;
                    vuePage.totalCount = res.total;
                });
            },
            addBtn: function () {
                this.form = {};
                this.editMod = false;
                this.addVisible = true;
            },
            search: function () {
                this.loadData();
            },
        },
        mounted: function () {

        }
    });
</script>
</body>
</html>
